<template>
  <div class="control-layout" ref="controlRef">
    <open-map></open-map>
    <ul class="header-tags">
      <li @click="sel_tags(1)">
        <img v-if="currentNum == 1" src="../assets/demo/icon_tags_active.png" />
        <img v-else src="../assets/demo/icon_tags.png" />
        <span>Map Control</span>
      </li>
      <li @click="sel_tags(2)">
        <img v-if="currentNum == 2" src="../assets/demo/icon_tags_active.png" />
        <img v-else src="../assets/demo/icon_tags.png" />
        <span>Map Control</span>
      </li>
      <li @click="sel_tags(3)">
        <img v-if="currentNum == 3" src="../assets/demo/icon_tags_active.png" />
        <img v-else src="../assets/demo/icon_tags.png" />
        <span>Map Control</span>
      </li>
      <li @click="sel_tags(4)">
        <img v-if="currentNum == 4" src="../assets/demo/icon_tags_active.png" />
        <img v-else src="../assets/demo/icon_tags.png" />
        <span>Map Control</span>
      </li>
      <li @click="sel_tags(5)">
        <img v-if="currentNum == 5" src="../assets/demo/icon_tags_active.png" />
        <img v-else src="../assets/demo/icon_tags.png" />
        <span>Map Control</span>
      </li>
      <li @click="sel_tags(6)">
        <img v-if="currentNum == 6" src="../assets/demo/icon_tags_active.png" />
        <img v-else src="../assets/demo/icon_tags.png" />
        <span>Map Control</span>
      </li>
      <li @click="sel_tags(7)">
        <img v-if="currentNum == 7" src="../assets/demo/icon_tags_active.png" />
        <img v-else src="../assets/demo/icon_tags.png" />
        <span>Map Control</span>
      </li>
    </ul>
    <ul class="header-tags" style="top: calc(100vh - 70px)">
      <li @click="sel_tags(8)">
        <img v-if="currentNum == 8" src="../assets/demo/icon_tags_active.png" />
        <img v-else src="../assets/demo/icon_tags.png" />
        <span>Map Control</span>
      </li>
      <li @click="sel_tags(9);">
        <img v-if="currentNum == 9" src="../assets/demo/icon_tags_active.png" />
        <img v-else src="../assets/demo/icon_tags.png" />
        <span>Map Control</span>
      </li>
      <li @click="sel_tags(10);fahongshui()">
        <img v-if="currentNum == 10" src="../assets/demo/icon_tags_active.png" />
        <img v-else src="../assets/demo/icon_tags.png" />
        <span>洪水</span>
      </li>
      <li @click="sel_tags(11); queryEvent()">
        <img v-if="currentNum == 11" src="../assets/demo/icon_tags_active.png" />
        <img v-else src="../assets/demo/icon_tags.png" />
        <span>画笔</span>
      </li>
      <li @click="sel_tags(12); reset()">
        <img v-if="currentNum == 12" src="../assets/demo/icon_tags_active.png" />
        <img v-else src="../assets/demo/icon_tags.png" />
        <span>一键复位</span>
      </li>
      <li @click="sel_tags(13); flyto()">
        <img v-if="currentNum == 13" src="../assets/demo/icon_tags_active.png" />
        <img v-else src="../assets/demo/icon_tags.png" />
        <span>飞行视角(回家)</span>
      </li>
      <li @click="sel_tags(14); addLayer()">
        <img v-if="currentNum == 14" src="../assets/demo/icon_tags_active.png" />
        <img v-else src="../assets/demo/icon_tags.png" />
        <span>添加tilelayer图层</span>
      </li>
    </ul>

    <div class="sel_box">
      <el-select placeholder="请选择" style="width: 300px;">
        <el-option :value="1">
        </el-option>
      </el-select>
    </div>

    <el-input v-model="extent" placeholder="请输入关键字" style="position: absolute; top: 600px; left: 10px; z-index: 999;width: 500px;"></el-input>

    <map-popup style="background-color: rgba(2, 53, 61, 0.9);" v-if="currentNum == 1">
      <template #content>
        <div class="img-spot-info-box">
          <p>
            <span>项目名称：</span>
            <span>{{ 123 }}</span>
          </p>
          <p>
            <span>项目编号</span>
            <span>{{ 456 }}</span>
          </p>
          <p>
            <span>项目类型：</span>
            <span>{{ 789 }}</span>
          </p>
          <p>
            <span>审批时间：</span>
            <span>{{ 321 }}</span>
          </p>
          <p>
            <span>法人单位：</span>
            <span>{{ 111 }}</span>
          </p>
          <p>
            <span>审批机关：</span>
            <span>{{ 222 }}</span>
          </p>
          <p>
            <span>用地面积：</span>
            <span>{{ 333 }}</span>
          </p>

        </div>
        <div class="img-spot-btns">
          <a class="xzhq-btn" download :href="`https://www.baidu.com/`">下载洪评报告</a>
        </div>
      </template>
    </map-popup>
  </div>
</template>
<script setup>
import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";

import { ref, inject, watch, onMounted } from 'vue'
import OpenMap from './OpenMap.vue';
import MapPopup from './MapPopup.vue';
import * as mapWork from '../utils/draw.js'

import { getMap } from './mapManager.js';

// 拉框坐标信息
const extent = ref()

let currentNum = ref(0)

let map = null;

// 控制图层显影
let num = ref(0)

//控制相机视角飞行
// 定义目标位置和视角参数
let destination = {
  x: 112.70, // 经度
  y: 30.44,  // 纬度
  z: 1000  // 高度
};

let orientation = {
  heading: Cesium.Math.toRadians(0), // 方向角
  pitch: Cesium.Math.toRadians(-90), // 俯仰角
  roll: Cesium.Math.toRadians(0)     // 翻滚角
};

onMounted(() => {
  map = getMap();
  if (map) {
    bindEvents();
  }
});

const bindEvents = () => {
  mapWork.eventTarget.on("drawExtent", (item) => {
    console.log("接受到的数据", item.extent);
    extent.value = item.extent;
  });
}

const flyto = () => {
  // map = inject("$map");
  map = getMap();
  if (!map) {
    console.error("地图实例不存在");
    return;
  }
  map.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(destination.x, destination.y, destination.z),
    orientation: orientation,
    duration: 5,
  });
}

// 相机复位
//setView没有动画效果,flyto有动画效果
const reset = () => {
  map = getMap();
  if (!map) {
    console.error("地图实例不存在");
    return;
  }
  const center = map.getCameraView()
  console.log("center参数为", JSON.stringify(center))
  map.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(108.885436, 30.054604, 17036414),
    orientation: {
      heading: Cesium.Math.toRadians(0), // 航向角
      pitch: Cesium.Math.toRadians(-90), // 俯仰角
      roll: Cesium.Math.toRadians(0) // 翻滚角
    },
  });
};

const sel_tags = (num) => {
  currentNum.value = num
  console.log(currentNum.value);
}

var layerXYZ = mars3d.LayerUtil.create({
  type: 'xyz',
  url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.jpg',
  subdomains: 'abc',
})

const tileLayer = new mars3d.layer.XyzLayer({
  url: "//data.mars3d.cn/tile/dizhiChina/{z}/{x}/{y}.png",
  minimumLevel: 0,
  maximumLevel: 10,
  rectangle: { xmin: 69.706929, xmax: 136.560941, ymin: 15.831038, ymax: 52.558005 },
  opacity: 0.7
})

// 监听当前选中标签
// watch(getMap, (newMap) => {
//   map = newMap;
//   if (map) {
//     bindEvents();
//   }
// });

// 控制图层显隐
const addLayer = () => {
  // map = inject("$map");
  map = getMap();
  if (!map) {
    console.error("地图实例不存在");
    return;
  }
  num.value += 1;
  if (num.value % 2 == 1) {
    map.addLayer(tileLayer);
  } else {
    map.removeLayer(tileLayer);
  }
}

// 拉框查询坐标
const queryEvent = () => {
  map = getMap();
  // map = inject("$map");
  if (!map) {
    console.error("地图实例不存在");
    return;
  }
  mapWork.drawRectangle({
    map,
    callback: (rectangle) => {
      console.log("矩形选取成功", rectangle);
    }
  });
  mapWork.eventTarget.on("drawExtent",(item)=>{
        console.log("接受到的数据", item.extent);
        extent.value = item.extent
      })
}

// 洪水演进
const fahongshui = () => {
  map = getMap();
  mapWork.hongshui(map)
}
</script>
<style scoped lang='scss'>
.control-layout {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.header-tags {
  position: absolute;
  top: 25px;
  left: 20px;
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  font-weight: 400;
  font-size: 16px;
  color: #FFFFFF;
  line-height: 34px;
  gap: 10px;
  z-index: 999;

  & li {
    width: 140px;
    height: 46px;
    position: relative;
    text-align: center;
    cursor: pointer;
  }

  & img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
  }

}

.sel_box {
  position: absolute;
  right: 90px;
  top: 30px;
  z-index: 999;
}

.title {
  font-weight: bold;
  font-size: 16px;
  color: #FFFFFF;
  line-height: 44px;
  background-color: #055460;
  //   opacity: $opacity;
  text-align: left;
  box-sizing: border-box;
  padding-left: 20px;
  width: 100%;
}

.img-spot-info-box {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  background: rgba(2, 53, 61, 0.9);

  & p {
    text-align: left;
    margin: 0;
    min-width: calc(50% - 10px);
    max-width: 100%;
  }

  & p span {
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
  }

  & p span:nth-child(2) {
    margin-left: 10px;
    color: #45E3FF;
  }
}
</style>
